<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/static/jquery.min.js"></script>
    <script src="/static/echarts.min.js"></script>
    <script src="/static/bootstrap-4.1.3/dist/js/bootstrap.js"></script>
    <!-- datetimepicker日期和时间插件 -->

    <link href="/static/bootstrap-4.1.3/dist/css/bootstrap.css" rel="stylesheet">


    {% comment %} <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>{% endcomment %}
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="container" style="width: 1200px;height:600px;"></div>
<div id="macd" style="width: 1200px;height:600px;"></div>


<script type="text/javascript">
    var list = {{ macdlist|safe }};
    var detailList = {{ detailList|safe }};

    //console.log(macdlist)


    $(document).ready(function () {

        macdShow();

        buysellShow();


    });


    function macdShow() {


        //console.log(detailList)

        var name = "";
        var xlist = new Array();
        var ylist = new Array();
        var brlist = new Array();
        var macdlist = new Array();
        var buylist = new Array();
        var selllist = new Array();
        var starlist = new Array();
        var endlist = new Array();
        //利润率
        var profitRatelist = new Array();
        var leDate = [];
        for (var i = 0; i < detailList.length; i++) {
            xlist[i] = i + 1;
            buylist[i] = detailList[i].buyPrice;
            brlist[i] = detailList[i].tradProfit;
            selllist[i] = detailList[i].sellPrice;
            starlist[i] = detailList[i].buyTime;
            endlist[i] = detailList[i].sellTime;
            profitRatelist[i] = detailList[i].profitability;
        }
        //alert(macdlist);
        var leDate = [];
        var y = '盈利/元';
        leDate.push('卖价');
        leDate.push('买价');
        leDate.push(y);
        //x轴显示的内容
        var hzlList = new Array();

        for (var i = 0; i < buylist.length && i < brlist.length && i < selllist.length; i++) {
            hzlList[i] = {
                value: buylist[i],
                buy: buylist[i],
                sell: selllist[i],
                start: starlist[i],
                end: endlist[i],
                br: brlist[i],
                profitRate:profitRatelist[i],

                //tooltip: {
                //    show: true,
                //    formatter: '{b}<br/>置装率：{c}%<br/>macd：' + macdlist[i] + '<br/>买点：' + buylist[i]

                // }

            }
            ;
        }
        //console.log(hzlList);

        var myChart = echarts.init(document.getElementById('container'));
        var option = {};
        option = {
            title: {
                text: "",
                x: 'center',
                show: true
            },
            legend: {
                show: true,
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'top',
                data: leDate
                //data:[name,'盈利/元']

            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '16%',   // 等价于 y: '16%'
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },
            // 提示框
            tooltip: {
                show: true,//默认值true，可选为：true（显示） | false（隐藏）
                trigger: 'axis',//默认值'item'，触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
                // showContent: true,//默认值true，tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false，
                //formatter: '{a} < br/>{b} : {c}',//默认值null，内容格式器
                formatter: function (params, ticket, callback) {
                    //根据业务自己拓展要显示的内容，可以打印一下参数选择自己需要的内容

                    var res = "";
                    var value = params[0].value;
                    var macd = params[0].data.macd;
                    var buy = params[0].data.buy;
                    var sell = params[0].data.sell;
                    var start = params[0].data.start.substring(0, 10);
                    var end = params[0].data.end.substring(0, 10);
                    var br = params[0].data.br;
                    var profitRate = params[0].data.profitRate;
                    //console.log(params[0]);
                    //然后在这里设置自己需要添加的一些其他的内容
                    res = "盈利：" + br +"元 利润率："+profitRate+"%<br/>"
                        + "<span style='color:#fff;'> 买入时间：" + start + " </span> <br/> 卖出时间：" + end + "<br/>"
                        + "<span style='color:#fff;'> 买入：" + buy + "元 </span>卖出：" + sell +"元";
                    return res;  //必须要有返回值
                }

            },
            //工具框，可以选择
            toolbox: {
                //可视化的工具箱
                show: true,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            //x轴显示数据
            xAxis: {
                name: '',
                type: 'category',
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 30, // 旋转角度
                    interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,

                //data: xlist
                data: xlist
            },
            yAxis: {
                name: y,
                type: 'value',
                //min: 0, // 设置y轴刻度的最小值
                //max: 100,  // 设置y轴刻度的最大值
                //splitNumber: 0,  //隔个数 设置y轴刻度间

            },
            series: [
                {
                    //data: ylist,
                    name: "买价",
                    data: hzlList,
                    type: 'line',
                    showAllSymbol: false,//示折线图上所有小标签
                    // 显示数值
                    itemStyle: {normal: {label: {show: true}}}
                },
                {
                    //data: ylist,
                    name: "卖价",
                    data: selllist,
                    type: 'line',
                    showAllSymbol: false,//示折线图上所有小标签
                    // 显示数值
                    itemStyle: {normal: {label: {show: true}}}
                },
                {
                    //data: ylist,
                    name: '盈利/元',
                    data: brlist,
                    type: 'bar',
                    barWidth: 10,
                    // 显示数值
                    itemStyle: {normal: {label: {show: true}}}
                }


            ]

        };
        ///3、在渲染点击事件之前先清除点击事件,点击多次调用
        myChart.off('click')
        // triggerEvent为true时，触发点击事件
        myChart.hideLoading();    //隐藏加载动画
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    }


    function buysellShow() {


        //console.log(detailList)

        var name = "";
        var xlist = new Array();
        var ylist = new Array();
        var brlist = new Array();

        var ma5list = new Array();
        var ma10list = new Array();
        var ma20list = new Array();
        var ma60list = new Array();

        var leDate = [];
        for (var i = 0; i < list.length; i++) {
            xlist[i] = list[i][1];
            ma5list[i] = intToFloat(list[i][11]);
            ma10list[i] = intToFloat(list[i][13]);
            ma20list[i] = intToFloat(list[i][15]);
            ma60list[i] = intToFloat(list[i][17]);

        }
        //alert(macdlist);
        var leDate = [];
        var y = '均线';
        leDate.push('ma5');
        leDate.push('ma10');
        //leDate.push('ma20');
        //leDate.push('ma60');
        leDate.push(y);
        //x轴显示的内容
        var hzlList = new Array();

        //console.log(hzlList);

        var myChart2 = echarts.init(document.getElementById('macd'));
        var option = {};
        option2 = {
            title: {
                text: "",
                x: 'center',
                show: true
            },
            legend: {
                show: true,
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: 'top',
                data: leDate
                //data:[name,'盈利/元']

            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '16%',   // 等价于 y: '16%'
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },
            // 提示框
            tooltip: {
                show: true,//默认值true，可选为：true（显示） | false（隐藏）
                trigger: 'axis',//默认值'item'，触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
                // showContent: true,//默认值true，tooltip主体内容显示策略，只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false，
                //formatter: '{a} < br/>{b} : {c}',//默认值null，内容格式器


            },
            //工具框，可以选择
            toolbox: {
                //可视化的工具箱
                show: true,
                feature: {
                    dataView: { //数据视图
                        show: true
                    },
                    restore: { //重置
                        show: true
                    },
                    dataZoom: { //数据缩放视图
                        show: true
                    },
                    saveAsImage: {//保存图片
                        show: true
                    },
                    magicType: {//动态类型切换
                        type: ['bar', 'line']
                    }
                }
            },
            //x轴显示数据
            xAxis: {
                name: '',
                type: 'category',
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 30, // 旋转角度
                    interval: 4  //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,

                //data: xlist
                data: xlist
            },
            yAxis: {
                name: y,
                type: 'value',
                //min: 0, // 设置y轴刻度的最小值
                //max: 100,  // 设置y轴刻度的最大值
                //splitNumber: 0,  //隔个数 设置y轴刻度间

            },
            series: [
                {
                    //data: ylist,
                    name: "ma5",
                    data: ma5list,
                    type: 'line',
                    showAllSymbol: false,//示折线图上所有小标签
                    // 显示数值
                    itemStyle: {normal: {label: {show: true}}}
                },
                {
                    //data: ylist,
                    name: "ma10",
                    data: ma10list,
                    type: 'line',
                    showAllSymbol: false,//示折线图上所有小标签
                    // 显示数值
                    itemStyle: {normal: {label: {show: true}}}
                }
                {% comment %}{
                    //data: ylist,
                    name: 'ma20',
                    data: ma20list,
                    type: 'line',
                    barWidth: 10,
                    // 显示数值
                    itemStyle: {normal: {label: {show: true}}}
                },
                {
                    //data: ylist,
                    name: 'ma60',
                    data: ma60list,
                    type: 'line',
                    barWidth: 10,
                    // 显示数值
                    itemStyle: {normal: {label: {show: true}}}
                }{% endcomment %}


            ]

        };
        ///3、在渲染点击事件之前先清除点击事件,点击多次调用
        myChart2.off('click')
        // triggerEvent为true时，触发点击事件
        myChart2.hideLoading();    //隐藏加载动画
        if (option2 && typeof option2 === "object") {
            myChart2.setOption(option2, true);
        }
        window.addEventListener("resize", function () {
            myChart2.resize();
        });

    }


    //保留两位小数
    function intToFloat(val) {
        return new Number(val).toFixed(2);
    }
</script>
</body>
</html>
